<template>
  <div class="container" ref="container">
    <PropertySetting ref="propertySetting" :node="nodeClick" v-model="processForm" :lf="lf">
      <template v-slot:[key]="data" v-for="(item, key) in $scopedSlots">
        <slot :name="key" v-bind="data || {}"></slot>
      </template>
    </PropertySetting>
  </div>
</template>

<script>
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import {Control, DndPanel, Menu, SelectionSelect} from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css'
import Start from "@/views/flow/warm-flow/js/start";
import Between from "@/views/flow/warm-flow/js/between";
import Serial from "@/views/flow/warm-flow/js/serial";
import Parallel from "@/views/flow/warm-flow/js/parallel";
import End from "@/views/flow/warm-flow/js/end";
import Skip from "@/views/flow/warm-flow/js/skip";
import graphData from "@/views/flow/warm-flow/js/data";
import PropertySetting from '@/views/flow/warm-flow/PropertySetting/index.vue'


export default {
  name: 'design',
  components: {
    PropertySetting,
  },
  data() {
    return {
      lf: null,
      nodeClick: null,
      processForm: {},
      value: {}
    }
  },

  created() {
    this.value = graphData;
  },
  mounted() {
    this.use();
    this.lf = new LogicFlow({container: this.$refs.container, grid: true,});
    this.register();
    this.initDndPanel();
    this.initControl();
    this.initMenu();
    this.initEvent();
    this.lf.render(this.value);
  },
  // watch: {
  //   processForm: {
  //     handler (n) {
  //       if (n) {
  //         delete n.type
  //         this.$emit('input', n)
  //       }
  //     },
  //     deep: true
  //   }
  // },

  methods: {
    /**
     * 初始化拖拽面板
     */
    initDndPanel() {
      this.lf.extension.dndPanel.setPatternItems([
        {
          type: 'start',
          text: '开始',
          label: '开始节点',
          icon: '',
        },
        {
          type: 'between',
          label: '用户任务',
          icon: '',
          className: 'important-node',
          properties: {status: "approval"}
        },
        {
          type: 'serial',
          label: '互斥',
          icon: '',
        },
        {
          type: 'parallel',
          label: '并行',
          icon: '',
        },
        {
          type: 'end',
          text: '结束',
          label: '结束节点',
          icon: '',
        },
      ]);
    },
    /**
     * 初始化控制面板
     */
    initControl() {
      this.lf.extension.control.addItem({
        iconClass: "lf-control-see",
        title: "",
        text: "查看",
        onClick: (lf, ev) => {
          console.log("see:", this.value)
        },
      });
      // 控制面板-清空画布
      this.lf.extension.control.addItem({
        iconClass: 'lf-control-save',
        title: '',
        text: '保存',
        onClick: (lf, ev) => {
          this.graphData = lf.getGraphData()
          console.log("save:", this.graphData)
        }
      });
    },
    /**
     * 初始化菜单
     */
    initMenu() {
      // 为菜单追加选项（必须在 lf.render() 之前设置）
      this.lf.extension.menu.addMenuConfig({
        nodeMenu: [
          {
            text: "分享",
            callback() {
              alert("分享成功！");
            },
          },
          {
            text: "属性",
            callback(node) {
              alert(`
          节点id：${node.id}
          节点类型：${node.type}
          节点坐标：(x: ${node.x}, y: ${node.y})`);
            },
          },
        ],
        edgeMenu: [
          {
            text: "属性",
            callback(edge) {
              alert(`
          边id：${edge.id}
          边类型：${edge.type}
          边坐标：(x: ${edge.x}, y: ${edge.y})
          源节点id：${edge.sourceNodeId}
          目标节点id：${edge.targetNodeId}`);
            },
          },
        ],
        graphMenu: [
          {
            text: "分享",
            callback() {
              alert("分享成功！");
            },
          },
        ],
      });
    },
    /**
     * 注册自定义节点和边
     */
    register() {
      this.lf.register(Start);
      this.lf.register(Between);
      this.lf.register(Serial);
      this.lf.register(Parallel);
      this.lf.register(End);
      this.lf.register(Skip);
    },
    /**
     * 添加扩展
     */
    use() {
      LogicFlow.use(DndPanel);
      LogicFlow.use(SelectionSelect);
      LogicFlow.use(Control);
      LogicFlow.use(Menu);
    },
    initEvent() {
      const { eventCenter } = this.lf.graphModel
      eventCenter.on('node:click,edge:click', (args) => {
        this.nodeClick = args.data
        this.$nextTick(() => {
          this.$refs.propertySetting.show()
        })
      })
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 800px;
}
</style>
<style>
.lf-control-see {
  background-image: url('');
}

.lf-control-save {
  background-image: url('');
}
</style>
